<template>
  <el-dialog
    :close-on-click-modal="false"
    :model-value="api.editPermissionState.visible"
    :title="api.editPermissionState.title"
    destroy-on-close
    width="600"
    @close="api.onCloseEditPermission()"
  >

    <el-form
      ref="formRef"
      :model="api.editPermissionState.form"
      :rules="rules"
      status-icon
    >

      <el-alert
        :closable="false"
        class="mb-2"
        title="接口访问权限"
        type="success"
      >
        <div class="fill-width d-flex align-center justify-space-between">
          <div>用于控制<strong>【 {{ api.editPermissionState.form.name }} 】</strong>可访问到的<strong>【 接口 】</strong></div>
        </div>

      </el-alert>

      <el-card class="edit-permission" shadow="never">
        <el-checkbox @change="onSelectAll">全选</el-checkbox>
        <el-scrollbar class="fill-width flex-fill" height="400px">
          <el-form-item
            prop="permissionList"
          >
            <el-tree
              ref="permissionTree"
              :data="permissionApi.urlState.data"
              :expand-on-click-node="false"
              :props="{label:'name',children:'apiPermissionList'}"
              node-key="uri"
              class="fill-width"
              show-checkbox
            >

            </el-tree>
          </el-form-item>
        </el-scrollbar>
      </el-card>

      <div class="fill-width d-flex justify-end">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="api.onCloseEditPermission()">关闭</el-button>
      </div>

    </el-form>
  </el-dialog>

</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { ElTree, FormRules } from "element-plus";
import { RoleApi } from "~/api/system/role/role.api";
import { PermissionApi } from "~/api/system/permission/permission.api";

interface Props {
  api: RoleApi;
}

const { api } = withDefaults(defineProps<Props>(), {});
const formRef = ref();
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  roleType: [{ required: true, message: "请角选择色类型", trigger: "blur" }],
});
const permissionApi = new PermissionApi();
const permissionTree = ref<InstanceType<typeof ElTree>>();

async function onSubmit() {
  const values = await formRef.value.validate();
  if (values) {
    api.editPermissionState.form.orgIdList = undefined;
    api.editPermissionState.form.menuIdList = undefined;

    let nodes: any[] = [];
    permissionTree.value!.getCheckedNodes().forEach((node) => {
      if(node.method){
        nodes.push(node);
      }
    });
    api.editPermissionState.form.permissionList = nodes;
    api.updatePermission(api.editPermissionState.form).then((res: any) => {
      if (res.ok) {
        api.onCloseEditPermission();
      }
    });
  }
}

function onChecked(check: boolean, data: any, node: any) {
  permissionTree.value!.setChecked(data.uri, check, true);
}

function onSelectAll(e: any) {
  permissionApi.urlState.data.forEach((item: any) => {
    permissionTree.value!.setChecked(item.uri, e, true);
  });
}

onMounted(() => {
  permissionApi.getPermission();
});

watch(() => api.editPermissionState.form.id, value => {
  if (value) {
    api.editPermissionState.form.permissionList?.forEach(permission => {
      permissionTree.value!.setChecked(permission.authority, true, true);
    });
  }
});
</script>

<style lang="scss" scoped>
.edit-permission {
  margin-bottom: 8px;

  :deep(.el-card__body) {
    position: relative;
    padding: 8px;
  }
}
</style>
